;(function ($) {
	var DropSearch = function (options) {
		var self = this
		this.inputField = $(options.selector)
		this.searchUrl = options.url
		this.inputParam = options.inputParam
		this.otherParams = options.otherParams
		this.debounceTime = options.debounceTime
		this.oUl = $("<div class=\"nav flex-column nav-pills chat-userlist\" role=\"tablist\" aria-orientation=\"vertical\"></div>")
		this.index = -1
		this.ajaxType = options.ajaxType || 'post'
		this.options = options

		var lock = false

		this.inputField
			.on(
				'input focus',
				debounce(function (e) {
					if (lock || !$(this).val()) return
					self.options.onInput($(this).val())
				}, self.debounceTime)
			)
			.on('compositionstart', function (e) {
				lock = true
			})
			.on('compositionend', function (e) {
				lock = false
				$(this).trigger('input')
			})

		$(document).on('keyup', function (e) {
			var keyCode = +e.keyCode

			if (e.keyCode == 40 && self.oUl.children().length > 0) {
				self.doMove(1)
			} else if (e.keyCode == 38 && self.oUl.children().length > 0) {
				self.doMove(-1)
			}
		})

		this.oUl.on('click',".nav-link", function (e) {
			var e = e || window.event
			e.stopPropagation()
			self.doInput($(this));
		})

		$(document).on('click', function () {
			self.oUl.empty()
		})
	}

	DropSearch.prototype.renderList = function (list) {
		if (!list || !list.length) {
			this.oUl.empty()
			return
		}
		this.index = -1
		var self = this,
			html = []
		self.oUl.empty()
		$.each(list, function (i) {
			var obj = list[i];
			var arr = obj.list;
			var idx = obj.idx;
			var hidden = arr.onLine ==1 ?"":" hidden";
			var context =
				"                                <a class=\"nav-link\"  name=\""+idx+"\" data-toggle=\"pill\" href=\"#\" role=\"tab\" aria-selected=\"false\">\n" +
				"                                    <div class=\"media\">\n" +
				"                                       <div class=\"user-status"+hidden+"\"></div>\n"+
				"                                        <img class=\"align-self-center rounded-circle\" src=\""+arr.photo+"\" alt=\"User Image\">\n" +
				"                                        <div class=\"media-body\">\n" +
				"                                            <h5>"+arr.realName+"</h5>\n" +
				"                                            <p>"+arr.status+"</p>\n" +
				"                                        </div>\n" +
				"                                    </div>\n" +
				"                                </a>";
			html += context;
		})
		self.oUl.append(html)
		self.inputField.parent().append(self.oUl).css('position', 'relative')
		self.oUl.css({
			top: self.inputField.outerHeight() + 2,
			left: self.inputField.get(0).offsetLeft,
			width: self.inputField.outerWidth()
		})
	}

	DropSearch.prototype.doMove = function (count) {
		var aLi = this.oUl.children()
		this.index = this.index + count
		if (this.index > aLi.length - 1) {
			this.index = 0
		} else if (this.index < 0) {
			this.index = aLi.length - 1
		}
		aLi.removeClass('active').eq(this.index).addClass('active')
	}

	DropSearch.prototype.doInput = function (data) {
		this.inputField.val(data)
		this.oUl.empty()
		if (this.options.clickHandler) {
			this.options.clickHandler(data)
		}
	}

	DropSearch.init = function (options) {
		return new this(options)
	}

	function debounce(fn, interval) {
		var timeout = null
		interval = interval || 300
		return function () {
			var self = this
			clearTimeout(timeout)
			timeout = setTimeout(function () {
				fn.apply(self, arguments)
			}, interval)
		}
	}

	window['DropSearch'] = DropSearch
})(jQuery)
